<template>
	<view>
		<view style="margin-top: 100px">
            <jk-button @click="handleOpen1">一般用法</jk-button>
            <jk-button @click="handleOpen2">带有提示、异步</jk-button>
        </view>
        <jk-action-sheet :visible="visible1" :actions="actions1" :show-cancel="true" @cancel="handleCancel1" @click="handleClickItem1">
            <div>
                <button type="primary">操作</button>
                <button type="primary">操作</button>
            </div>
        </jk-action-sheet>
        <jk-action-sheet
            :visible="visible2"
            :actions="actions2"
            :show-cancel="true"
            @cancel="handleCancel2"
            @click="handleClickItem2"
            :mask-closable="false">
            <view slot="header" style="padding: 16px">
                <view style="color: #444;font-size: 16px">确定吗？</view>
                <text>删除后无法恢复哦</text>
            </view>
        </jk-action-sheet>

        
	</view>
</template>

<script>
    
	export default {
		data() {
			return {
				visible1: false,
                visible2: false,
                actions1: [
                    {
                        name: '选项1',
                    },
                    {
                        name: '选项2',
                        loading: true
                    },
                    {
                        name: '去分享',
                        icon: 'share',
                        openType: 'share'
                    }
                ],
                actions2: [
                    {
                        name: '删除',
                        color: '#ed3f14'
                    }
                ]
			};
		},
        methods: {
            handleOpen1 () {
                this.visible1 = true;
            },

            handleCancel1 () {
                this.visible1 = false
            },

            handleOpen2 () {
                this.visible2 = true;
            },

            handleCancel2 () {
                this.visible2 = false;
            },

            handleClickItem1 (val) {
                console.log('点击了选项', val);
            },

            handleClickItem2 () {
                const action = this.actions2;
                action[0].loading = true;

                this.actions2 = action;

                setTimeout(() => {
                    action[0].loading = false;
                    this.visible2 = false;
                    this.actions2 = action;
                    console.log('删除成功');
                }, 2000);
            }
        }
	}
</script>

<style>

</style>
